import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { TabBar } from 'antd-mobile';

const seizeSeat = {
    width:'100%',
    height: '22px'
}

class TabBarExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'blueTab',
            hidden: false,
            fullScreen: false,
        };
    }
    componentWillMount () {
        this.setState({
            selectedTab: this.props.flag
        })
    }
    render() {
        return (
            <div>
                <div style={seizeSeat}>
                </div>
                <div style={{ position: 'fixed', width: '100%', bottom: 0 , zIndex: 100}}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="Life"
                        icon={<div style={{
                            width: '22px',
                            height: '20px',
                            background:`url(${require("../../assets/img/home.png")}) center center /  100% 100% no-repeat`
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '20px',
                            background:`url(${require("../../assets/img/home2.png")}) center center /  100% 100% no-repeat`
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'blueTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'blueTab',
                            });
                            this.props.history.push('/Home');
                        }}
                        data-seed="logId"
                    >
                    </TabBar.Item>
                    <TabBar.Item
                        title="发现"
                        icon={
                            <div style={{
                                width: '22px',
                                height: '20px',
                            background:`url(${require("../../assets/img/find.png")}) center center /  100% 100% no-repeat`
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '20px',
                                background:`url(${require("../../assets/img/find2.png")}) center center /  100% 100% no-repeat`
                            }}
                            />
                        }
                        key="Koubei"
                        selected={this.state.selectedTab === 'redTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'redTab',
                            });
                            this.props.history.push('/Find');
                        }}
                        data-seed="logId1"
                    >

                    </TabBar.Item>
                    <TabBar.Item
                        title="我的"
                        icon={
                            <div style={{
                                width: '22px',
                                height: '20px',
                                background:`url(${require("../../assets/img/my.png")}) center center /  100% 100% no-repeat`
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '20px',
                                background:`url(${require("../../assets/img/my2.png")}) center center /  100% 100% no-repeat`                                
                            }}
                            />
                        }
                        key="Friend"
                        selected={this.state.selectedTab === 'greenTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'greenTab',
                            });
                        }}
                    >
                    </TabBar.Item>
                </TabBar>
                {/* this.props.history.push('/newsviewer/' + item.id) */}
            </div>
            </div>
        );
    }
}

export default withRouter(TabBarExample);
// export default withRouter(TabBarExample); smox
// 参考: https://segmentfault.com/a/1190000011137828